<script setup>
import TodoInput from "./components/TodoInput.vue";
import TodoFilter from "./components/TodoFilter.vue";
import TodoList from "./components/TodoList.vue";
import TodoItem from "./components/TodoItem.vue";

import useTodos from "./composables/useTodos";
import useFilterTodos from "./composables/useFilterTodos";

const { todos, addTodo } = useTodos();

const { filter, filter_todos } = useFilterTodos(todos);
</script>

<template>
  <main>
    <div class="container">
      <h1>What's Up Bro</h1>
      <todo-input :tid="todos.length" @addTodo="addTodo"></todo-input>

      <todo-filter
        :selected="filter"
        @change-filter="filter = $event"
      ></todo-filter>

      <todo-list :todos="filter_todos"></todo-list>
    </div>
  </main>
</template>

<style>
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: "Times New Roman", Times, serif;
}

main {
  width: 100vw;
  /* min-height 
  1.使全屏可有背景色 
  2.不限制表单长度，防止出现滚动条 
  3.表单长度高于1vh时，背景色伴随表单所在区域 */
  min-height: 100vh;
  display: grid;
  justify-items: center;
  align-items: center;
  background: rgb(203, 210, 240);
}

.container {
  width: 60%;
  min-height: 60vh;
  min-width: 300px;
  max-width: 400px;
  box-shadow: 0px 0px 24px rgba(0, 0, 0, 0.15);
  border-radius: 24px;
  padding: 48px 28px;
  background-color: rgb(245, 246, 252);
}

/* 标题 */
h1 {
  font-size: 28px;
  text-align: center;
  margin: 24px 0;
}

/* 输入框
父层调布局，子层调样式 */
.input-add {
  display: flex;
  align-items: center;
  position: relative;
}
.input-add input {
  /* 上右下左 
  左边 18 是因为椭圆边框会遮住光标
  右边 52 是因为要放一个添加按钮
  上下 16 为了提升输入框高度*/
  padding: 16px 52px 16px 18px;
  /* 使input获取焦点时无边框加粗 */
  outline: none;
  width: 100%;
  font-size: 16px;
  color: #626262;
  border: none;
  border-radius: 48px;
  box-shadow: 0 0 24 rgba(0, 0, 0, 0.08);
}
.input-add button {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(#c0a5f3, #7f95f7);
  border: none;
  outline: none;

  position: absolute;
  right: 0;

  cursor: pointer;
}
.input-add button .plus {
  display: block;
  width: 100%;
  height: 100%;
  /* 这里为什么要采用同色渐变呢 */
  background: linear-gradient(#fff, #fff), linear-gradient(#fff, #fff);
  background-size: 50% 2px, 2px 50%;
  background-position: center;
  background-repeat: no-repeat;
}

.filters {
  display: flex;
  margin: 24px 2px;
  color: #c0c2ce;
  font-size: 14px;
}
.filters .filter {
  margin-right: 14px;
  transition: 0.3s;
}
.filters .active {
  color: #6b729c;
  transform-origin: left center;
  transform: scale(1.2);
}

.todo-list {
  /* 此处作用仅仅是使用 row-gap 制造块间空隙 */
  display: grid;
  row-gap: 14px;
}
.todo-item {
  background: white;
  border-radius: 8px;
  padding: 16px;
  color: #626262;
  user-select: none;
}
.todo-item label {
  position: relative;
  display: flex;
  align-items: center;
}
.todo-item label span {
  position: absolute;
  /* 自动到了左上角 */
  top: 0;
}
.todo-item label span::before,
.todo-item label span::after {
  content: "";
  display: block;
  /* absolute让两个块能重叠在一起 */
  position: absolute;
  /* 直接给他造两个相同的圆 */
  width: 18px;
  height: 18px;
  border-radius: 50%;
}

.todo-item label span::before {
  border: 1px solid #b382f9;
}
.todo-item label span::after {
  transition: 0.4s;
  background: #b382f9;
  /* 使用translate向右下移比transform-origin:center更居中 */
  /* 这里如果不是缩小的话，让两个圆垂直居中就好了 */
  transform: translate(1px, 1px) scale(0.7);
  opacity: 0;
}

.todo-item input {
  margin-right: 16px;
  opacity: 0;
}
.todo-item input:checked + span::after {
  opacity: 1;
}
</style>
